<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-for 然后 事件绑定 及常用事件</title>
  <script src="../../lib/vue.js"></script>
  <style>
    .btnS input {
      background-color: #4CAF50;
      border: none;
      border-radius: 12px;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 20px;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1>我们用Buttons来演示常用事件</h1>
    <div class="btnS">
      <!-- <div v-html="htmlInput"></div> -->
      <input v-for="(item,index) in btnName" type="button" :value="index+'. '+item" :key="index">
    </div>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      btnName: ["点击事件", "双击事件", "按下事件", "抬起事件", "鼠标触及", "鼠标离开"],
      funCaller: ["Click", "DblClick", "MouseDown", "MouseUp", "MouseOver", "MouseOut"],
      // htmlInput: "<input v-for=\"(item,index) in btnName\" type=\"button\" :value=\"index+\'. \'+item\" :key=\"index\" @doubleClick=\"fun1($event,index)\">"
    },
    mounted()
    {
      // console.log(document.getElementsByClassName("btnS")[0].children);
      // !!! 从这里可以看到最齐全的事件列表
      var bDiv = document.getElementsByClassName("btnS");
      var childs = bDiv[0].children;
      console.log(bDiv[0].children);
      // 此处的funCaller本来应该可以引用data中的funCaller的，但是我忘了该怎么写了
      var funCaller = ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mouseout"];
      for (var i = 0; i < childs.length; i++)
      {
        // fun1也报错未定义，所以改写为箭头函数

        // childs[i].addEventListener(funCaller[i], fun1($event, i));
        // 此处的打印 i，在事件被触发时，i是处于undefined状态的
        // 寻找另外的传参方法（我们希望能打印出 触发的事件类型::所在元素的唯一ID）

        // 据说 $this 可以传入事件的触发元素 —— 要的就是这个效果
        // ??? 不知怎么机缘巧合被我打印出了一个 Vue 对象，后来再也复现不出来了。。。😭
        // childs[i].addEventListener(funCaller[i], ($event, $this) =>
        // ($event,$this) 不可以改写为 ($event,this)
        // 后续实验发现，就算参数中没有 $this 也可以正常 console.log(this)🙄 效果没区别
        // 最终都只能打印出各种undefined，打印事件所在元素唯一ID的计划破产

        // var j = 0;
        // childs[i].addEventListener(funCaller[i], ($event, index = ++j) =>
        // 这样子能写出 计数器 的效果。而且这个计数器还是六个事件共用的。算是意外之喜。

        // 试图曲线救国，新建一个t,是从元素中取到的假ID
        // 但是依然没法把这个t传给事件函数
        // console.log(childs[i].defaultValue.split('.'));
        // var t = childs[i].defaultValue.split('.')[0];
        // console.log(t);

        // 非箭头函数的index=i和箭头函数的index=i效果并无二样
        // 其他写法的效果，也同样并无二样

        // 最后一个办法 引用Vue实例的methods中定义的fun1,
        // 如果我能复现出当时打印出Vue对象的代码，或许可以试试
        // 现在根本访问不到Vue对象 无从下手

        // 就这样吧，我太难了😵
        childs[i].addEventListener(funCaller[i], ($event) =>
        {
          console.log(event.type + " :: ");
          // console.log(event.type + " :: " + index);
          // console.log("1 :" + this);// 1: this 会输出 1 :[object Object]
          // console.log("1.0 :" + this[0]);// 这个是undefined
          // console.log("1.1 :" + this[1]);// 这也是undefined
          // console.log("2 :" + $this);// 2 : $this 会输出 undefined 
          // console.log("3 :" + $(this));// 3 : $(this) 会报错 Uncaught ReferenceError: $ is not defined
          console.log("\n")
        });
        console.log("为 " + childs[i].defaultValue + " 添加了监听器 针对事件: " + funCaller[i]);
      }
    },
    methods: {
      fun1(event, index)
      {
        console.log(event.type + " :: " + index + "\n");
      }
    },
  })
</script>

</html>